<template>
	<view class="content">
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" @click="goBack" style="line-height: 64rpx;" class="back">
				<text class='tn-icon tn-icon-left font-42 font-weight-800'></text>
			</view>
			<view slot="default">
				<view>
					<tn-tabs :list="list" :current="current" :bold="true" @change="change" :showBar="false" :fontSize="36"
						activeColor="#E74954" inactiveColor="#000" :barWidth="50" :barHeight="6"></tn-tabs>
				</view>
			</view>
		</tn-nav-bar>
		<view class="cate">
			<!-- 收入 -->
			<view v-if="current === 0" class="d-flex text-center flex-wrap">
				<view class="cate_item my-2" v-for="(item, index) in incomeList" @click="itemClick(item)">
					<image :src="item.isActive ? item.activeIcon : item.icon" mode=""></image>
					<!-- <image :src="item.activeIcon" mode=""></image> -->
					<view class="mt-2">{{item.text}}</view>
				</view>
			</view>
			<!-- 支出 -->
			<view v-else class="d-flex text-center flex-wrap">
				<view class="cate_item my-2" v-for="(item, index) in expendList" @click="itemClick(item)">
					<image :src="item.isActive ? item.activeIcon : item.icon" mode=""></image>
					<view class="mt-2">{{item.text}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		shareMixins
	} from '@/common/share.js'
	import {
		INCOM_LIST,
		EXPEND_LIST
	} from "@/constant/index.js"
	export default {
		mixins: [shareMixins],
		data() {
			return {
				list: [{
					name: '收入'
				}, {
					name: '支出'
				}],
				current: 0,
				incomeList: INCOM_LIST, //收入列表
				expendList: EXPEND_LIST, //支出列表
				text: '',
				type: '',
			}
		},
		onLoad(options) {
			if ('text' in options) {
				this.text = options.text
			}

			if ('type' in options) {
				this.type = options.type
			}
			this.init()
			if (this.type === '0') {
				this.current = 0
				for (let item of this.incomeList) {
					if (item.text === this.text) {
						item.isActive = true
					}
				}
			} else {
				this.current = 1
				for (let item of this.expendList) {
					if (item.text === this.text) {
						item.isActive = true
					}
				}
			}
		},
		methods: {
			init() {
				for (let item of this.incomeList) {
					item.isActive = false
				}
				for (let item of this.expendList) {
					item.isActive = false
				}
				this.$nextTick(() => {
					this.$forceUpdate()
				})
			},
			itemClick(item) {
				console.log('item', item);
				this.init()
				item.isActive = true
				uni.$emit('returnIcon', {
					item,
					type: this.current
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			},
			// 返回
			goBack() {
				uni.navigateBack()
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		overflow: auto;

		.back {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.cate {
			margin-top: 200rpx;

			.cate_item {
				width: 25%;
			}

			image {
				width: 108rpx;
				height: 108rpx;
			}
		}


	}
</style>